<script setup>
import {inject} from "vue";
import MarkDown from "@/components/MarkDown.vue";

const props = defineProps({
    groupInfo: Object,
})

// const TypeName = {
//     logger:'日志',
//     nodeInput:'节点入参',
//     nodeOutput:'节点输出'
// }
const processConfig = inject('processConfig');
const ProcessType = processConfig.processType;
const ProcessTitle = processConfig.processTitle;
</script>

<template>
    <div class="chat-box-process-card">
        <div class="chat-box-process-card-title">
            {{ ProcessTitle}}：{{ groupInfo.groupName }}
        </div>
        <div class="chat-box-process-card-content" v-for="(data,index) in groupInfo.data" :key="index">
            <div class="chat-box-process-card-content-type">
                {{ ProcessType[data.type] }}
            </div>
            <div class="chat-box-process-card-content-item">
                <mark-down :content="data.data"></mark-down>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.chat-box-process-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #eeeeee;
    border-radius: 8px;


    &-title {
        padding: 8px 15px;
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #eeeeee;
    }

    &-content {
        flex: 1;
        padding: 10px 10px;

        &-type {
            position: relative;
            padding: 5px 5px;
            font-weight: bold;

            &:before {
                content: '';
                position: absolute;
                left: -2px;
                top: 9px;
                bottom: 9px;
                width: 2px;
                background-color: #3a72e1;
            }
        }

        &-item {
            padding: 8px 15px;
            background-color: #eeeeee;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
}
</style>